<template>
  <BottomDialog :is-show="props.isShow">
    <template #prepend-icon>
      <p
        class="text-primary line-height-140 text-primary text-size-14 font-weight-500 font-style-normal"
        @click="toSignUp"
      >
        {{ $t('label.register') }}
      </p>
    </template>
    <template #title>
      <p class="text-center text-white font-size-16 font-weight-500 line-height-140 font-style-normal">
        {{ $t('label.login') }}
      </p>
    </template>
    <template #append-icon>
      <slot name="append-icon"></slot>
    </template>
    <template #body>
      <v-form>
        <div>
          <InputWrap
            v-model="credential.username"
            :err-msg="parseError(errors.username)"
            :label="$t('label.account')"
            :placeholder="$t('placeholder.account')"
            trim
          ></InputWrap>
        </div>
        <div class="mt-4">
          <InputWrap
            v-model="credential.password"
            :err-msg="parseError(errors.password)"
            :label="$t('label.password')"
            :placeholder="$t('label.password')"
            password
          ></InputWrap>
        </div>
        <div class="text-end">
          <span class="font-size-12 font-weight-400 line-height-875 pointer" @click="to(AUTH_ROUTES.FORGET_PASSWORD)">
            {{ $t('label.forgotPassword') }}
          </span>
        </div>
        <div class="mt-6">
          <BlockButton
            :label="$t('label.login')"
            :is-gradient="false"
            :disabled="loginDisabled"
            @click="onLoginClicked"
          ></BlockButton>
        </div>
      </v-form>
    </template>
  </BottomDialog>
</template>
<script setup>
import { VForm } from 'vuetify/components'
import { onKeyStroke } from '@vueuse/core'
import { useAuthRouteStore } from '@/store/auth-route'
import { $t } from '@/i18n'
import { parseError } from '@/plugins/yup'
import BlockButton from '@/components/button/BlockButton.vue'
import BottomDialog from '@/components/dialogs/BottomDialog.vue'
import InputWrap from '@/components/form/InputWrap.vue'
import { useLogin } from '@/compositions/auth/login'
import { AUTH_ROUTES } from '@/constant'

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
})

const { to } = useAuthRouteStore()
const toSignUp = () => {
  to(AUTH_ROUTES.SIGN_UP)
}

const { credential, errors, loginDisabled, onLoginClicked } = useLogin()

onKeyStroke('Enter', onLoginClicked)
</script>
